<template>
	<div class="container">
		<p class="title-label text-title">统计分析</p>
		<div class="content_wrap">
			<AplidCharts type="BasicPie" :option="option" style="height: 100%" ref="chartBarEl"></AplidCharts>
		</div>
	</div>
</template>

<script setup lang="ts">

let colors = ['#0052D9', '#00A870', '#ED7B2F', '#E84A21', '#64A2FF', '#079B0D']
const itemStyle = {
	barBorderRadius: [4, 4, 0, 0],
	emphasis: {
		shadowBlur: 10,
		shadowOffsetX: 0,
		shadowColor: 'rgba(0, 0, 0, 0.3)',
	},
}
const option = {
	color: colors,
	tooltip: {
		show: true,
		backgroundColor: 'rgba(0, 0, 0,.8)',
		textStyle: {
			color: '#fff',
		},
	},
	title: {
		show: true,
		text: '累计补贴金额',
		subtext: '¥123,224',
		x: '49.5%',
		y: '40%',
		textStyle: {
			color: '#000',
			fontSize: 16,
			fontWeight: '400',
			lineHeight: 15,
		},
		subtextStyle: {
			color: '#000',
			fontSize: 32,
			fontWeight: '600',
		},
		textAlign: 'center',
	},

	dataset: {
		source: [
			['补贴类型', '发放金额'],
			['床位建设补贴', 43.3, 85.8, 93.7],
			['设置医疗机构补贴', 83.1, 73.4, 55.1],
			['从业人员补贴', 86.4, 65.2, 82.5],
			['老年大学课程补贴', 72.4, 53.9, 39.1],
			['机构等级评定补贴', 72.4, 53.9, 39.1],
			['综合运营补贴', 72.4, 53.9, 39.1],
		],
	},
	legend: {
		orient: 'vertical',
		right: '5%',
		top: '13%',
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 10,
		textStyle: {
			color: '#',
			fontSize: 16,
		},
	},
	series: [
		{
			type: 'pie',
			radius: [80, 100],
			center: ['50%', '50%'],
			labelLine: {
				show: false,
			},
			label: {
				show: false,
			},
			itemStyle,
		},
	],
}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	.text-title {
		font-family: 'Microsoft YaHei Bold';
		font-weight: 700;
		font-size: 16px;
		text-align: left;
		color: #1c1c28;
		padding-bottom: 11px;
	}

	.content_wrap {
		height: calc(100% - 52px);
		border-radius: 10px;
		background: #fff;
	}
}
</style>
